<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@include file="/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Flexible EE Page</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
    
	<link rel="stylesheet" type="text/css" href="common/css/complex.css" />
	<link type="text/css" rel="stylesheet" href="themes/smoothness/jquery-ui-1.8.7.custom.css"/>
	<link type="text/css" rel="stylesheet" href="themes/ui.jqgrid.css"/>
	<link type="text/css" rel="stylesheet" href="themes/ui.multiselect.css"/>
    <style type="text/css">
		body {
			font-size: 62.5%;
			overflow: hidden;
			font-family: Trebuchet MS, Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif;
			background-color: #EEE;
		}
		
		/* main item style*/
		.main-item { margin: 0 0 5px 0; }
		.item-header { cursor: move; padding: 0.3em 0.2em 0.2em 0.3em}
		.item-header .ui-icon { float: right;  cursor:pointer;}
		.item-content { padding: 0.4em; display: none;}

		/* accordion category action style */
		#accordions h3 span {float: right; display: none;}
		
		/* accordion items action style */
		#accordions li span {float: left;}
		#accordions li a {float: right; display: none;}
		
		/* sortable accordion items */
		.connectedSortable li { margin: 0; font-size: 1.2em; height: 32px;  padding: 10px 15px;}
		.ui-sortable-placeholder { border: 1px dotted red; visibility: visible !important; height: 20px !important; }
		.ui-sortable-placeholder * { visibility: hidden; }
		.ui-sortable-placeholder-item { border: 1px dotted blue; visibility: visible !important; height: 20px !important; }
		.ui-sortable-placeholder-item * { visibility: hidden; }
		
		/* edit Accordion Item */
		#sysIcons .ui-selecting { background: #FECA40; }
		#sysIcons .ui-selected { background: #F39814; color: white; }
		#sysIcons { list-style-type: none; margin: 0; padding: 0; }
		#sysIcons li { margin: 3px; padding: 1px; float: left; width: 35px; height: 35px; font-size: 1.4em; text-align: center; vertical-align:middle; }
		
    </style>
	
<%--	<script language="JavaScript" src="script/jquery.versionControl.js"></script>--%>
	
	<script language="JavaScript" src="script/jquery-1.4.4.min.js"></script>
	<script language="JavaScript" src="script/jquery-ui-1.8.7.custom.min.js"></script>
	<script language="JavaScript" src="script/utils/jquery.cookie.js"></script>
	<script language="JavaScript" src="script/json2.js"></script>

	
	<script language="JavaScript" src="script/jqGrid/i18n/grid.locale-en.js"></script>
	<script type="text/javascript">
//			jQuery.jgrid.no_legacy_api = true;
		</script>
	<script language="JavaScript" src="script/jqGrid/grid.loader.js"></script>
	<script type="text/javascript" src="script/ui-layout/jquery.layout-latest.js"></script>
	<script type="text/javascript" src="script/ui-layout/complex.js"></script>
	<script type="text/javascript" src="script/jquery.jqGridUtil.js"></script>
	
	<script language="JavaScript" type="text/javascript">

		<c:choose>
			<c:when test="${empty wrapper.id}">
				var cfgId = 0;
			</c:when>
			<c:otherwise>
				var cfgId = <c:out value="${wrapper.id}" />;
			</c:otherwise>
		</c:choose>
		
		var outerLayout, gridPerm;
		var layoutSettings = {
                name: "outerLayout" 
        ,       defaults: {
                        size:                                   "auto"
//                ,       minSize:                                80
                ,       paneClass:                              "pane"          // default = 'ui-layout-pane'
                ,       resizerClass:                   "resizer"       // default = 'ui-layout-resizer'
                ,       togglerClass:                   "toggler"       // default = 'ui-layout-toggler'
                ,       buttonClass:                    "button"        // default = 'ui-layout-button'
                ,       contentSelector:                ".content"      // inner div to auto-size so only it scrolls, not the entire pane!
                ,       contentIgnoreSelector:  "span"          // 'paneSelector' for content to 'ignore' when measuring room for content
                ,       togglerLength_open:             35                      // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
                ,       togglerLength_closed:   35                      // "100%" OR -1 = full height
                ,       hideTogglerOnSlide:             true            // hide the toggler when pane is 'slid open'
                ,       togglerTip_open:                "Close This Pane"
                ,       togglerTip_closed:              "Open This Pane"
                ,       resizerTip:                             "Resize This Pane"
                ,       fxName:                                 "slide"         // none, slide, drop, scale
                ,       fxSpeed_open:                   750
                ,       fxSpeed_close:                  1500
                ,       fxSettings_open:                { easing: "easeInQuint" }
                ,       fxSettings_close:               { easing: "easeOutQuint" }
        }
        ,       north: {
                        spacing_open:                   0                       // cosmetic spacing
                ,       togglerLength_open:             0                       // HIDE the toggler button
                ,       togglerLength_closed:   -1                      // "100%" OR -1 = full width of pane
//                ,		spacing_closed: 0								//either (togglerLength_closed & spacing_closed) eq 0 is hide the toggler button
//                ,       slidable:                               false
                //      override default effect
                ,       fxName:                                 "none"
                }
        ,       south: {
//                        size:                                27
//                ,       spacing_closed:                 10                       // HIDE resizer & toggler when 'closed'
//                ,       slidable:                               true           // REFERENCE - cannot slide if spacing_closed = 0
                       resizable:                               false
                ,       togglerLength_open:             -1                       
                ,       togglerLength_closed:   		-1                      // "100%" OR -1 = full width of pane
                ,       fxName:                                 "none"				           
                }
        ,       west: {
                        size:                                   200
                ,       spacing_closed:                 21                      // wider space when closed
                ,       togglerAlign_closed:    "center"           // align to center of resizer
                ,       togglerLength_closed:   21                      // make toggler 'square' - 21x21
                ,       togglerLength_open:             127                       // toggler button size when status is opened
                ,       togglerTip_open:                "Close West Pane"
                ,       togglerTip_closed:              "Open West Pane"
                ,       resizerTip_open:                "Resize West Pane"
                ,       slideTrigger_open:              "click"         // default
                ,       initClosed:                             false
                //      add 'bounce' option to default 'slide' effect
                ,       fxSettings_open:                { easing: "easeOutBounce" }
				,		onresize:                 function () { $("#accordions").accordion("resize"); }
                }
        ,       east: {
                        size:                                   90
				,		maxSize:								200
                ,       spacing_closed:                 21                      // wider space when closed
                ,       togglerLength_closed:   21                      // make toggler 'square' - 21x21
                ,       togglerAlign_closed:    "top"          
                ,       togglerLength_open:             127                       
                ,       slideTrigger_open:              "mouseover"
                ,       initClosed:                             false
                //      override default effect, speed, and settings
                ,       fxName:                                 "drop"
                ,       fxSpeed:                                "normal"
                ,       fxSettings:                             { easing: "" } // nullify default easing
                }
        ,       center: {
                        paneSelector:                   "#mainContent"                  // sample: use an ID to select pane instead of a class
                }
        };
		
		
		//init layout
		$(document).ready(function() {
			
		       // create the OUTER LAYOUT
            outerLayout = $("body").layout(layoutSettings);

            // BIND events to hard-coded buttons in the NORTH toolbar
            outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
            outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
            outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
            outerLayout.addPinBtn( "#tbarPinWest", "west" );
            outerLayout.addPinBtn( "#tbarPinEast", "east" );

            // save selector strings to vars so we don't have to repeat it
            // must prefix paneClass with "body > " to target ONLY the outerLayout panes
            var westSelector = "body > .ui-layout-west"; // outer-west pane
            var eastSelector = "body > .ui-layout-east"; // outer-east pane

             // CREATE SPANs for pin-buttons - using a generic class as identifiers
            $("<span></span>").addClass("pin-button").prependTo( westSelector );
            $("<span></span>").addClass("pin-button").prependTo( eastSelector );
            // BIND events to pin-buttons to make them functional
            outerLayout.addPinBtn( westSelector +" .pin-button", "west");
            outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );

             // CREATE SPANs for close-buttons - using unique IDs as identifiers
            $("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
            $("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
            // BIND layout events to close-buttons to make them functional
            outerLayout.addCloseBtn("#west-closer", "west");
            outerLayout.addCloseBtn("#east-closer", "east");

            // DEMO HELPER: prevent hyperlinks from reloading page when a 'base.href' is set
            $("a").each(function () {
                    var path = document.location.href;
                    if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
                    if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
            });
		});
		
		// Main page Navigation 
		$(function() {
			// ** restore the order
			var mainItemsSortable = $("#mainItems");
			var order = $.cookie("sortableOrder");
			
			if (order) {
			      $.each(order.split(","),function(i,id) {
			            //appending the element with the ID, given id should move each element to the end of the 
			            // list one after another, and at the end, the order should be restored.
			            $("#"+id).appendTo(mainItemsSortable);
			      });
			};
			
			// ** store the item order in cookie
			mainItemsSortable.sortable({
				handle: '.item-header',
				cursor: 'move',
			    opacity: 0.4, 
			    update:function(e,ui) {
              		order = mainItemsSortable.sortable("toArray").join();
              		$.cookie("sortableOrder",order);
			    }
			      
			});
			
			// ** add show & hide panel
			mainItemsSortable.find(".main-item").addClass("ui-widget ui-widget-content ui-helper-clearfix")
				.find(".item-header")
					.addClass("ui-widget-header")
					.prepend('<a href="javascript:void(0)"><span class="ui-icon ui-icon-circle-triangle-n"></span></a>')
					.find("a")
						.hover(
							function() { $(this).addClass('ui-state-hover'); },
							function() { $(this).removeClass('ui-state-hover'); }
						)
						.find(".ui-icon")
							.click(function() {
								$(this).toggleClass("ui-icon-circle-triangle-n").toggleClass("ui-icon-circle-triangle-s");
								$(this).parents(".main-item:first").find(".item-content").toggle();
							});
			
			// ** starts fomatters 
			function emptyValueFmtter (cellvalue) {
				if(!cellvalue) cellvalue = "&nbsp;"
				return cellvalue;
			}
			
			function redStarFmtter (cellvalue, options, rowObject){
				if(rowObject.deadline)	cellvalue =  "<font style='color:red'>*</font>" + cellvalue;
				
				return emptyValueFmtter(cellvalue); 
			}
			
			function stmtStatusFmtter (cellvalue, options, rowObject){
				
				if(rowObject.statementStatus == 68) cellvalue = "<img src='common/img/tickg.gif' width='13' height='13'/>";
				else {
					if(rowObject.statementStatus == 500) cellvalue = "<div>IP</div>";
					else cellvalue = "<img src='common/img/crossg.gif' width='13' height='13'/>";
				}
				
				return emptyValueFmtter(cellvalue); 
			}
			
			function eventSourceFmtter (cellvalue, options, rowObject){
				
				if(rowObject.nonNet) cellvalue = "Non-Netted";
				else {
					if(rowObject.eventSource == 0) cellvalue = "Net";
					else if(rowObject.eventSource == 4) cellvalue = "Auto-Net";
				}
				
				return emptyValueFmtter(cellvalue); 
			}
			
			function tickImgFmtter (cellvalue, options, rowObject){
				
				if(cellvalue) cellvalue = "<img src='common/img/tickg.gif' width='13' height='13'/>";
				
				return emptyValueFmtter(cellvalue); 
			}
			
			function disputedAgeFmtter (cellvalue, options, rowObject){
				
				if(rowObject.disputedValue < 0) cellvalue = rowObject.disputeAge;
				
				return emptyValueFmtter(cellvalue); 
			}
			
			function agrBaseCcyFmtter (cellvalue, options, rowObject){
				
				cellvalue =  "<font style='color:#CC0000'>" + cellvalue + "</font>";
				
				return emptyValueFmtter(cellvalue); 
			}
			
			// ** ends formatters
			
			// ** logic JS Starts....
			function callStatusChanged(e) {
		    	
		    	var callStatus = this.options[selectElement.selectedIndex].value;
		    	
				var agreementId = rowData.agreementId;
				
				var eventSource = rowData.eventSource;
				
				var eeInitTab = rowData.eeInitTab;
				
				var eventDate = rowData.eventDate;
				var historical = rowData.historical;
				
				var trs = $jqGrid.jqGrid("getRowData");
				if (trs != "" && trs != null)
				{
					if(eeInitTab == 3 || eeInitTab == 7){
						for (var i=1; i<trs.length;i++)
						{
							if ((trs[i].historical == historical) && (trs[i].eventDate == eventDate)&&(trs[i].agreementId == agreementId)&&(trs[i].eeInitTab == eeInitTab)&&(trs[i].eventSource == eventSource)&&(trs[i].callStatus!= callStatus ))
							{
								trs[i].callStatus = callStatus;
								break;
							}
						}
					}
				}
		    }		

			// ** logic JS Ends....
			
            function myelem(value, options){
                if(!rowData) return;
//                var $elem = $("<input>", {
//                    type: "text",
//                    val: "Test",
//                    focusin: function(){
//                        $(this).addClass("active");
//                    },
//                    focusout: function(){
//                        $(this).removeClass("active");
//                    }
//                })
					
                var $elem = $("<select><option value='1'>A</option></select>");
				
                return $elem[0];
            }
            
            function myvalue(elem){
                return $(elem).val();
            }
			
			function workflowElem(value, options) {
				var $elem;
//				var workflowStatus = rowData[options.name];

				if(value == 68) {
					$elem = $("<select><option value='68'>Approved</option></select>")
				}				
				
				return $elem[0];
			}
			function workflowValue(elem) {
				
				
				return elem;
			}
			
			
			// ** data grid
//			$jqGrid = jQuery("#jqGrid").jqGrid(${jqCfg});
			$jqGrid = jQuery("#jqGrid").jqGrid(
			
			{
	"autowidth": true, 
	"cellEdit": true, 
	"cellsubmit": "clientArray", 
	"colModel": [
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "", 
			"label": "WorkFlow", 
			"name": "workflowId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Agrement Id", 
			"name": "agreementId", 
			"resizable": true, 
			"search": true, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "text", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "External Id", 
			"name": "externalId", 
			"resizable": true, 
			"search": true, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "text", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "", 
			"label": "Movement Required", 
			"name": "movementRequiredId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "", 
			"label": "Dead Line", 
			"name": "deadline", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "", 
			"label": "Letter Action", 
			"name": "letterAction", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "date", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "eventDate", 
			"label": "Event Date", 
			"name": "eventDate", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "date", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "eventDate", 
			"label": "Event Date(Agreement)", 
			"name": "eventDateAgreement", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "eventId", 
			"label": "Event ID", 
			"name": "eventId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "agreementHeader.prinOrgHeader.id", 
			"label": "Principal Id", 
			"name": "principalId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": redStarFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.prinOrgHeader.orgCode", 
			"label": "Principal", 
			"name": "principalCode", 
			"resizable": true, 
			"search": true, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "text", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "integer", 
			"hidden": true, 
			"hidedlg": false, 
			"index": "agreementHeader.cptyOrgHeader.id", 
			"label": "Counterparty Id", 
			"name": "counterpartyId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.cptyOrgHeader.shortName", 
			"label": "Counterparty", 
			"name": "counterpartyName", 
			"resizable": true, 
			"search": true, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "text", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.description", 
			"label": "Description", 
			"name": "description", 
			"resizable": true, 
			"search": true, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "text", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": stmtStatusFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "statement.statementStatus.statusId", 
			"label": "Statement Status", 
			"name": "statementStatus", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 120
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "select", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "workflowStatus", 
			"label": "Workflow Status", 
			"name": "workflowStatus", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "*CA", 
			"name": "calcAgent", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": {
				"value": {1:'One',2:'Two'},
				"dataEvents": [
					{ type: 'change', data: { i: 7 }, fn: callStatusChanged  },
					{ type: 'keypress', data: { i: 7 }, fn: function(e) { console.log('keypress'); }  } 
				]
			}, 
			"editrules": "", 
			"edittype": "select", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "workflowProc.marginCallStatus", 
			"label": "Call Status", 
			"name": "marginCallStatus", 
			"resizable": true, 
			"search": true, 
			"searchoptions": {
				"value": {
					"0": " ", 
					"65": "Pending Review", 
					"58": "No Call Required", 
					"204": "Waived", 
					"205": "Completed", 
					"150": "------", 
					"55": "Margin Request Issued", 
					"56": "Margin Request Confirmed", 
					"145": "Partial Dispute", 
					"146": "Full Dispute", 
					"59": "Margin Request Received", 
					"149": "Collateral Booked"
				}
			}, 
			"sortable": true, 
			"stype": "select", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "select", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "userDefinedCallStatus", 
			"label": "User Defined Call Status", 
			"name": "userDefinedCallStatus", 
			"resizable": true, 
			"search": true, 
			"searchoptions": {
				"value": {
					"0": " ", 
					"496": "Sub Request Received", 
					"497": "Sub Request Made"
				}
			}, 
			"sortable": true, 
			"stype": "select", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": eventSourceFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "eventSource", 
			"label": "Margin Type", 
			"name": "nonNet", 
			"resizable": true, 
			"search": true, 
			"searchoptions": {
				"value": {
					"0": " ", 
					"1": "Net", 
					"2": "Not-Net", 
					"3": "Auto-Net"
				}
			}, 
			"sortable": true, 
			"stype": "select", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": tickImgFmtter, 
			"hidden": true, 
			"hidedlg": false, 
			"index": "released", 
			"label": "*RBC", 
			"name": "released", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": tickImgFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "*SDB", 
			"name": "sysDraftPresent", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": tickImgFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "statement.clBreached", 
			"label": "*CLB", 
			"name": "clBreached", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "actionId", 
			"label": "Action", 
			"name": "movementRequired", 
			"resizable": true, 
			"search": true, 
			"searchoptions": {
				"value": {
					"0": " ", 
					"52": "Call", 
					"51": "Recall", 
					"53": "Delivery", 
					"54": "Return", 
					"120": "ITM No Calls", 
					"121": "OTM No Calls"
				}
			}, 
			"sortable": true, 
			"stype": "select", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementRequirement", 
			"label": "Agreement Requirement", 
			"name": "marginCall", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "text", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "marginDelvCtpy", 
			"label": "Counterparty Amount", 
			"name": "marginDelvCtpy", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": tickImgFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "verified", 
			"label": "*CEV", 
			"name": "verified", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.std", 
			"label": "*STD Amount", 
			"name": "stdAmount", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreedAmount", 
			"label": "Sys.Calculated Amount", 
			"name": "agreedAmount", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "workflowProc.issuedValue", 
			"label": "Issued Value", 
			"name": "issuedValue", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "date", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "workflowProc.issueDate", 
			"label": "Issued Date", 
			"name": "issueDate", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "text", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Instrument Id", 
			"name": "instrumentId", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "text", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreedAmount", 
			"label": "User Agreed Amount", 
			"name": "userAgreedAmount", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": {
				"value": "true:false"
			}, 
			"editrules": "", 
			"edittype": "checkbox", 
			"formatter": "checkbox", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "overWriteUserAgreedAmt", 
			"label": "Overwrite", 
			"name": "overwrite", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": agrBaseCcyFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.baseCurrency", 
			"label": "Agreement Base Ccy", 
			"name": "currency", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": disputedAgeFmtter, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "disputeAge", 
			"label": "Dispute Age", 
			"name": "disputeAge", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "disputeAmt", 
			"label": "Dispute Value", 
			"name": "disputedValue", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": true, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "textarea", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "comments", 
			"label": "Comments", 
			"name": "comments", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "statement.totalExposure", 
			"label": "Total Exposure Amount", 
			"name": "totalExposure", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Adjusted Collateral Value", 
			"name": "adjColValue", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.colManager", 
			"label": "Collateral Manager", 
			"name": "colManager", 
			"resizable": true, 
			"search": true, 
			"searchoptions": {
				"value": {
					"0": " ", 
					"London Derivatives Collateral Desk   - null": "London Derivatives Collateral Desk   - null", 
					"London Derivatives Collateral  Desk - null": "London Derivatives Collateral  Desk - null", 
					"London Derivatives Collateral Desk - null": "London Derivatives Collateral Desk - null", 
					"Ben Aston - null": "Ben Aston - null", 
					"OTC COLLATERAL DESK - Collateral Team": "OTC COLLATERAL DESK - Collateral Team", 
					"ABN Asset Management Ltd - null": "ABN Asset Management Ltd - null"
				}
			}, 
			"sortable": true, 
			"stype": "select", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.reciprocity", 
			"label": "Reciprocity", 
			"name": "reciprocity", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.prinOrgHeader.shortName", 
			"label": "Principal Name", 
			"name": "principalName", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.agreementType", 
			"label": "Type", 
			"name": "agreementType", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": "currency", 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementRequirement", 
			"label": "System Requirement", 
			"name": "systemReq", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "System Base Ccy", 
			"name": "systemBaseCcy", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "*LRFP", 
			"name": "legalFrequencyPeriod", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "*LRFD", 
			"name": "legalFrequencyDays", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Notify By", 
			"name": "notifyBy", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Resolve By", 
			"name": "resolveBy", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Credit Ratings", 
			"name": "creditRating", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Event Source", 
			"name": "eventSource", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Init Tab", 
			"name": "eeInitTab", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Historical", 
			"name": "historical", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Delivery Status", 
			"name": "deliveryStatus", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "agreementHeader.groupId", 
			"label": "Group", 
			"name": "group", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": true, 
			"stype": "", 
			"width": 100
		}, 
		{
			"align": "left", 
			"editable": false, 
			"editoptions": null, 
			"editrules": "", 
			"edittype": "", 
			"formatter": null, 
			"hidden": false, 
			"hidedlg": false, 
			"index": "", 
			"label": "Agreement Status", 
			"name": "agreementStatus", 
			"resizable": true, 
			"search": false, 
			"searchoptions": null, 
			"sortable": false, 
			"stype": "", 
			"width": 100
		}
	], 
	"colNames": [
		"WorkFlow", 
		"Agreement", 
		"External Id", 
		"Movement Required", 
		"Dead Line", 
		"Letter Action", 
		"Event Date", 
		"Event Date(Agreement)", 
		"Event ID", 
		"Principal Id", 
		"Principal", 
		"Counterparty Id", 
		"Counterparty", 
		"Description", 
		"Statement Status", 
		"Workflow Status", 
		"*CA", 
		"Call Status", 
		"User Defined Call Status", 
		"Margin Type", 
		"*RBC", 
		"*SDB", 
		"*CLB", 
		"Action", 
		"Agreement Requirement", 
		"Counterparty Amount", 
		"*CEV", 
		"*STD Amount", 
		"Sys.Calculated Amount", 
		"Issued Value", 
		"Issued Date", 
		"Instrument Id", 
		"User Agreed Amount", 
		"Overwrite", 
		"Agreement Base Ccy", 
		"Dispute Age", 
		"Dispute Value", 
		"Comments", 
		"Total Exposure Amount", 
		"Adjusted Collateral Value", 
		"Collateral Manager", 
		"Reciprocity", 
		"Principal Name", 
		"Type", 
		"System Requirement", 
		"System Base Ccy", 
		"*LRFP", 
		"*LRFD", 
		"Notify By", 
		"Resolve By", 
		"Credit Ratings", 
		"Event Source", 
		"Init Tab", 
		"Historical", 
		"Delivery Status", 
		"Group", 
		"Agreement Status"
	], 
	"datatype": "json", 
	"height": 380, 
	"jsonReader": {
		"id": "workflowId", 
		"page": "page", 
		"records": "records", 
		"repeatitems": false, 
		"root": "items", 
		"total": "total"
	}, 
	"multiselect": true, 
	"pager": "#gridPager", 
	"rowList": [
		10, 
		20, 
		30
	], 
	"rowNum": 20, 
	"shrinkToFit": false, 
	"sortable": false, 
	"sortname": "eventDate", 
	"sortorder": "Asc", 
	"toolbar": [
		"true", 
		"top"
	], 
	"url": "", 
	"viewrecords": true
}
			
			
			);
				
			$jqGrid.jqGrid('navGrid','#gridPager',{add:true,del:true,edit:true,view:true,search:true,refresh:true,position:'left'})
					.jqGrid('navButtonAdd','#gridPager',{
						caption:"save",
						title:"Save Filters", 
						buttonicon:"ui-icon-disk", 
						onClickButton: saveDataFilter, 
						position:"last"
						
					})
					.jqGrid('navButtonAdd','#gridPager',{
						caption:"clear",
						title:"Clear Fiters", 
						buttonicon:"ui-icon-refresh", 
						onClickButton: function(){ 
							var sgrid = $jqGrid[0];
							sgrid.clearToolbar();
						}, 
						position:"last"
						
					});

			$("#jqGrid").toolbarButtonAdd("#t_jqGrid",{
				caption:"",
				title:"Save Filters", 
				position:"first",
				align:"right", 
				buttonicon:"ui-icon-disk", 
				onClickButton: saveDataFilter 
			})
			.toolbarButtonAdd("#t_jqGrid",{
				caption:"",
				title:"Clear Fiters", 
				buttonicon:"ui-icon-refresh", 
				onClickButton: function(){ 
					var sgrid = $jqGrid[0];
					sgrid.clearToolbar();
				} 
			});
	
			$jqGrid.jqGrid('navButtonAdd','#gridPager',{
			    caption: "columns",
			    title: "Reorder Columns",
                onClickButton: function(){
                    $jqGrid.jqGrid('columnChooser', {
                        done: function(perm){
                        	
                            if (perm) {
								perm.shift();
								var postPerm = null;
								
								if(perm != gridPerm) {
	                                this.jqGrid("remapColumns", perm, true);
									gridPerm = perm;
									postPerm = perm;
								}

								var colModel = this.jqGrid("getGridParam","colModel");
	                            var hiddenIds = new Array();
	                            for (var i = 0; i < colModel.length; i++) {
	                                if (colModel[i].hidden) {
	                                    hiddenIds.push(colModel[i].name);
	                                }
	                            }
	                            
	                            sendAjaxRequest({
	                                method: 'updateGridPro',
	                                cfgId: cfgId,
	                                hiddenIds: JSON.stringify(hiddenIds),
									perm: JSON.stringify(postPerm)
	                            }, function(data){
	                                cfgId = data;
	                            });
                            }
							
                        }
                    });
                }
			});
			
			$jqGrid.jqGrid('filterToolbar',{searchOnEnter : true});
			
			$jqGrid.jqGrid('setGridParam',{ 
			    serializeGridData: function(postData){
					postData.filter = "";
					return postData;
				}
			});
			
			var rowData;
			$jqGrid.jqGrid('setGridParam',{ 
			    formatCell: function(rowid, cellname, value, iRow, iCol){
					rowData = $jqGrid.jqGrid("getRowData",rowid);
				}
			});
			
			$jqGrid.jqGrid('setGridParam',{ 
			    afterSaveCell: function(rowid){
					if(!$("#jqg_jqGrid_" + rowid).attr("checked"))
						$("#jqg_jqGrid_" + rowid).attr("checked",true).triggerHandler("click");
				}
			});
			
			$jqGrid.jqGrid('setGridParam',{ 
			    loadComplete: function(data){
					addChkEvent();
				}
			});
			
			$("#cb_jqGrid").click(function() {
				if(filterId) actionBtnCheckRequest($(this).attr("checked") ? 2 : 0);
			})
			
			//add checkBox click event
			var addChkEvent = function(){
				var multiChks = new Array();
				var lastCheckedNum = 0;
				$("#jqGrid tbody tr").each(function(index){
					var $multiChk = $(this).find("td:first :checkbox");
					multiChks.push($multiChk);
					$multiChk.click(function(){
//						var numberArr = $jqGrid.jqGrid("getGridParam", "selarrrow");
//						numberArr.push($(this).attr("id"));
						
						var checkedNum = 0;
						$.each(multiChks, function(i, n){
							if (n.attr('checked')) {
								checkedNum++;
							}
						});
						
						if (lastCheckedNum > 1 && checkedNum > 1) 
							return;
						
						actionBtnCheckRequest(checkedNum);
						lastCheckedNum = checkedNum;
					});
				});
			}
			
			var actionBtnCheckRequest = function(number) {
				$("li", "#actions").hide();
				sendSyncRequest({
							method: 'showActionBtn',
							actionNum: number
						}, function(data){
							if (data) {
								var nameArr = data.split(",");
								for (var i = 0; i < nameArr.length; i++) {
//					                $("." + nameArr[i]).slideDown("slow");
									$("." + nameArr[i]).show("slow");
								}
							}
						}, "text", true);
			}
			
			// add action event
			$("li","#actions").click(function() {
				
				if($(this).hasClass("save")) {
					var changedArr = $jqGrid.jqGrid('getChangedCells','dirty');
					
					$jqGrid.jqGrid("getPostData");
					$jqGrid.jqGrid("appendPostData", {changedArr: JSON.stringify(changedArr)});
					
					$jqGrid.trigger("reloadGrid")
					
					return ;
				}
				
				var baseURL =  $(this).attr("baseURL");
				var parameter = $(this).attr("param");
				
				var URL = baseURL;
				if(parameter){
					URL = baseURL+"?";
					URL = buildURL(URL,parameter);
				}
    		    window.location.href = URL;  
			});
			
			function getParamValue(obj, paramName) {
				
				return obj[paramName];
			}
			
			function buildURL(URL,parameter){
				var numberArr = $jqGrid.jqGrid("getGridParam", "selarrrow");
				var curRowData = $jqGrid.jqGrid("getRowData",numberArr[0]);
				
				var str = parameter.split(",");
				
				for (i=0;i<str.length;i++ ){   
					if(str[i].indexOf("=") != -1) {
						URL = URL + str[i] + "&";
					} else {
        				URL = URL + str[i] + "=" + getParamValue(curRowData, str[i]) + "&";
					}
    		  	}
    		    URL = URL.substring(0,URL.length-1);
    		    return URL;
			}
		});
			
		var filterId;
		saveDataFilter = function() {
			if(!filterId) return;

			var inputs = $("#"+filterId).siblings(":input");
//			var filter = new Object();
//			filter.id = filterId;
			
			var filterItems = new Array();
			var filterItem; 
			$("select,:text","#p3 .ui-search-toolbar").each(function(i) {
				filterItem = new Object();
				filterItem.fieldName = $(this).attr("id").replace("gs_", "");
			
			//advanced search need matchType
//				filterItem.filterType = "CONTAINS";
				filterItem.filterValue = $(this).val();
				filterItems.push(filterItem);
				
				var $input = inputs.filter("[name='" + filterItem.fieldName + "']");
				if($input.length == 0) {
					$input = $("<input>", {
						"type": 'hidden',
						"name": filterItem.fieldName
//						"value": filterItem.filterValue
					});
					$input.insertAfter(inputs);
				}
				$input.val(filterItem.filterValue);
			});
			
			sendAjaxRequest({	
					method: 'updateDataFilter',
					cfgId: cfgId,
					filterId: filterId,
					filter: JSON.stringify(filterItems)
				}, function(data){
                   cfgId = data;
                });	
			
		}
	
		// West Navigation
		$(function() {
			
			// ** Setup Accordion
			var $accordions = $("#accordions").accordion(
			{
				fillSpace: true
			});
	
			// ** Setting Sortable
			var $sortableItems = $accordions.find(".connectedSortable").sortable({
				appendTo: 'body', 
				cursor: 'move',
				placeholder: 'ui-sortable-placeholder-item',
				helper: function(event) {
					return $('<div class="ui-icon ui-icon-circle-check"></div>');
				},
//				stop: saveLayout,
			    opacity: 0.5   
			}).disableSelection();
			
			// ** save item order
			function saveLayout() { 
				
				var idsArr = new Array();			
				$sortableItems.each(function(i) {
					var idArr = $(this).find("li").map(function(index, item) {		
						return $(item).attr("id");
					})
					idsArr.push(idArr.get());
				})
				
				sendAjaxRequest({	
					method: 'updateItemPos',
					cfgId: cfgId,
					idsArray: JSON.stringify(idsArr)
				}, function(data){
                   cfgId = data;
                });
			}
			
			$("#test").click(function() {
				//1.save item order
//				saveLayout();

				//2. post data grid form
//				var changedArr = $jqGrid.jqGrid('getChangedCells','dirty');
				
//				alert(changedArr);

//				alert("hello");
				
			});
			
			// ** drag item on accordion header
			var $accrodion_items = $("#accordions > h3").droppable({
				accept: "#accordions .connectedSortable li",
				hoverClass: "ui-state-highlight",
				drop: function(ev, ui) {
					var $item = $(this);
					var $list = $item.next("div").find('.connectedSortable');
	
					ui.draggable.css("display", "");
					ui.draggable.hide('slow', function() {
						$accordions.accordion( "activate" , $accrodion_items.index($item) );
						//be care of $(this), this --> draggable item
						$(this).appendTo($list).show('highlight', 2000);
					});
				}
			});

			// ** add category add, edit, del hover
			var $selectedCategory;
			$accrodion_items.hover(function() {
				$(this).find("a").nextAll().show();
			}, function() {
				$(this).find("a").nextAll().hide();
			}).find("a").nextAll().click(function() {
				$selectedCategory = $(this).parent();
				if ($(this).hasClass("ui-icon-plusthick")) {
					
					$("#itemLabel").val("");
					$("#itemDesc").val("");
					
					$dialogitem.dialog( "option", "title", 'New Item' );
					$dialogitem.dialog( "option", "buttons", { "Save": addItemDialogFun } );
					
					$dialogitem.dialog('open');
				} else if ($(this).hasClass("ui-icon-pencil")) {
					
					$("#categoryLabel").val($selectedCategory.find("a").text());
					$("#categoryDesc").val($selectedCategory.attr("title"));
					
					$dialogcategory.dialog( "option", "title", 'Category Edit' );
					$dialogcategory.dialog( "option", "buttons", { "Save": editCategoryDialogFun } );
 					$dialogcategory.dialog('open');
					
				} else {

					if($selectedCategory.next().children('ul').children().length == 0) {
						$dialogConfirm.dialog( "option", "title", 'Category Delete' );
						$dialogConfirm.dialog( "option", "buttons", { "Delete": delCategoryDialogFun } );
						$dialogConfirm.dialog('open');	
					} else {
						alert("please delete items belong to category first");
					}
				}
			});
			
			// ** add item edit & del behavior
			var $selectedItem;
			itemEventFun($(".connectedSortable li", "#accordions"));
			
			function itemEventFun(obj) {
				obj.hover(function() {
					$(this).addClass("ui-state-default").find("a").show();
				}, function() {
					$(this).removeClass("ui-state-default").find("a").hide();
				}).click(function() {
					
					if(!$jqGrid.jqGrid("getGridParam", "url")) {
						$jqGrid.jqGrid("setGridParam",{url:"realData.json"});
					}
					
					clearToolbarValue();	
					filterId = $(this).attr("filter");
					
					$(this).find("input:hidden").each(function(i) {
						
						$("#gs_"+$(this).attr("name")).val($(this).val());
					});
					
					var sgrid = $jqGrid[0];
					sgrid.triggerToolbar();
					
//					$jqGrid.jqGrid("setGridParam",{url:"realData.json"}).trigger("reloadGrid");
					
				}).find("a").click(itemModifiedFun);
			}
			
			function clearToolbarValue() {
				
				$(".ui-search-toolbar :text","#p3").each(function(i) {
					$(this).val("");
				});
				
				$(".ui-search-toolbar select", "#p3").each(function(i) {
					$(this).get(0).selectedIndex=0;
					
//					$(this).find("option").each(function(index) {
//						if(index===0) { this.selected = true; }
//					});
					
				});
				
			} 
			
			function itemModifiedFun() {
				
				$selectedItem = $(this).parent();
				if($(this).hasClass("ui-icon-pencil")) {

					$selectedItem.removeClass("ui-state-default");
					$sysIcons.find("li").removeClass("ui-selected").each(function(i) {
						if($(this).attr("title") == $selectedItem.attr("class")) {
							$(this).addClass("ui-selected");
						}
					});

					$("#itemLabel").val($selectedItem.find("font").text());
					$("#itemDesc").val($selectedItem.attr("title"));
					
					$dialogitem.dialog( "option", "title", 'Item Edit' );
					$dialogitem.dialog( "option", "buttons", { "Save": editItemDialogFun } );
//					$dialogitem.dialog( "option", "buttons", [ { text: "Save", click: editItemDialogFun }, { text: "Cancel", click: cancelDialogFun } ] );
					$dialogitem.dialog('open');
				} else {
					$dialogConfirm.dialog( "option", "title", 'Item Delete' );
					$dialogConfirm.dialog( "option", "buttons", { "Delete": delItemDialogFun } );
//					$dialogConfirm.dialog( "option", "buttons", [ { text: "Delete", click: delItemDialogFun }, { text: "Cancel", click: cancelDialogFun } ] );
					$dialogConfirm.dialog('open');
				}
				return false;
				
			}
			
			cancelDialogFun = function() {
				$(this).dialog('close');
			}
			
			addCategoryDialogFun =function() {
				
			}
			
			editCategoryDialogFun = function() {
				//ajax save Data
				var bValid = true;

				var category = new Object();
				category.id = $selectedCategory.attr("id");
				category.label = $("#categoryLabel").val();
				category.desc = $("#categoryDesc").val();
				
				if (bValid) {
					
					sendAjaxRequest({
							method: 'updateCatagory',
							cfgId: cfgId,
							category: JSON.stringify(category)
						}, function(result) {
							cfgId = result;
						}
					);
												
					$(this).dialog('close');
	
					$selectedCategory.attr("title", category.desc);
					$selectedCategory.find("a").text(category.label);
					
				}
				
			}
			
			delCategoryDialogFun = function() {
				sendAjaxRequest({	
					method: 'delCatagory',
					cfgId: cfgId,
					categoryId: $selectedCategory.attr("id")
				}, function(data){
                   cfgId = data;
                });
							
				$selectedItem.remove();
				
				$(this).dialog('close');
			}
			
			var $copyItem;
			addItemDialogFun = function(){
				var bValid = true;
				
				var accordionItem = new Object();
				accordionItem.label = $("#itemLabel").val();
				accordionItem.desc = $("#itemDesc").val();
				accordionItem.icon = $sysIcons.find(".ui-selected").attr("title");

				$copyItem = $($(".connectedSortable li", "#accordions").get(0)).clone();
				
				if (bValid) {
				
					sendAjaxRequest({
						method: 'createItem',
						cfgId: cfgId,
						categoryId: $selectedCategory.attr("id"),
						item: JSON.stringify(accordionItem)
					},  function(result){
						cfgId = result.id;
						filterId = result.dataFilterId;
						$copyItem.attr("id", result.itemId).attr("filter", result.dataFilterId);
						$copyItem.find(":hidden:first").attr("id", result.dataFilterId);
					});
					
					$(this).dialog('close');
					
				}
				
				$copyItem.appendTo($selectedCategory.next().children("ul")).attr("class", accordionItem.icon)
					.attr("title", accordionItem.desc).find("font").text(accordionItem.label);
					
				itemEventFun($copyItem);
				
				clearToolbarValue();
				
			}
			
			editItemDialogFun = function() {
				//ajax save Data
				var bValid = true;

				var accordionItem = new Object();
				accordionItem.id = $selectedItem.attr("id");
				accordionItem.label = $("#itemLabel").val();
				accordionItem.desc = $("#itemDesc").val();
				accordionItem.icon = $sysIcons.find(".ui-selected").attr("title");

				if (bValid) {
					
					sendAjaxRequest({
							method: 'updateItem',
							cfgId: cfgId,
							item: JSON.stringify(accordionItem)
						}, function(result) {
							cfgId = result;
						}
					);
												
					$(this).dialog('close');
	
					$selectedItem.attr("class", accordionItem.icon);
					$selectedItem.attr("title", accordionItem.desc);
					$selectedItem.find("font").text(accordionItem.label);
					
				}
			}
			
			delItemDialogFun = function() {
				sendAjaxRequest({	
					method: 'delItem',
					cfgId: cfgId,
					categoryId: $selectedItem.parent().parent().prev().attr("id"),
					itemId: $selectedItem.attr("id")
				}, function(data){
                   cfgId = data;
                });
							
				$selectedItem.remove();
				
				$(this).dialog('close');
			}
			
			// ** add item edit & del dialog
			var $dialogConfirm = $("#dialog-confirm").dialog({
				autoOpen: false,
				resizable: false,
				height:140,
				modal: true
//				buttons: {
//					'Delete': delItemDialogFun,
//					Cancel: cancelDialogFun
//				}
			});
			
			var $dialogcategory = $("#dialog-category").dialog({
				autoOpen: false,
				height: 250,
				width: 350,
				show: 'scale',
				hide: 'explode',
				modal: true
//				buttons: {
//					'Save': editDialogItemFun,
//					Cancel: cancelDialogFun
//				},
			});
				
			var $dialogitem = $("#dialog-item").dialog({
				autoOpen: false,
				height: 250,
				width: 350,
				show: 'scale',
				hide: 'explode',
				modal: true
//				buttons: {
//					'Save': editDialogItemFun,
//					Cancel: cancelDialogFun
//				},
			});	

			//** sysIcons
			$sysIcons = $("#sysIcons").selectable();
			
		});

			
		datePick = function(elem) {
		   jQuery(elem).datepicker({ showAnim: 'show' });
		}
		
		autoComplete = function(elem){
			var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
			jQuery(elem).autocomplete({
				minLength: 0,
				source: function(request, response){
					// delegate back to autocomplete, but extract the last term
					response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
				},
				focus: function(){
					// prevent value inserted on focus
					return false;
				},
				select: function(event, ui){
					var terms = split(this.value);
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push(ui.item.value);
					// add placeholder to get the comma-and-space at the end
					terms.push("");
					this.value = terms.join(", ");
					return false;
				}
			});
		}
		
		function split(val) {
			return val.split(/,\s*/);
		}
		
		function extractLast(term) {
			return split(term).pop();
		}

		function sendAjaxRequest(data, callback) {
			$.get("jGrid/viewPage.ajax", data, callback);
		}
		
		function sendSyncRequest(data, callback, dtype, sync) {
			if(!dtype) dtype = 'json';
			if(!sync) sync = false;
			$.ajax({
	            url : 'jGrid/viewPage.ajax',
	            type : 'GET',
	            dataType : dtype,
	            data : data,
				async: sync,
	            success: callback,
				error:   function(){
				        alert(arguments[1]);
				}
    		});
		}
		
	</script>
	
  </head>
  
<body>
	
	<div id="dialog-category" title="Category Edit">
		<p class="validateTips">All form fields are required.</p>
		<br />
		<form>
			<label>Name</label>
			<input type="text" id="categoryLabel" class="ui-widget-content" />
			<br />
			<label>Description</label>
			<input type="text" id="categoryDesc" class="ui-widget-content" />
			<br/>
		</form>
		<br />
	</div>
	
	<div id="dialog-item" title="Item Edit">
		<p class="validateTips">All form fields are required.</p>
		<br />
		<form>
			<label>Name</label>
			<input type="text" id="itemLabel" />
			<br />
			<label>Description</label>
			<input type="text" id="itemDesc" class="ui-widget-content" />
			<br/>
			<label>Icon</label>
			<ul id="sysIcons">
				<li class="iCall" title="iCall"><span class="item_bg_position"></span></li>
				<li class="iReCall" title="iReCall"><span class="item_bg_position"></span></li>
				<li class="iDelivery" title="iDelivery"><span class="item_bg_position"></span></li>
				<li class="iReturn" title="iReturn"><span class="item_bg_position"></span></li>
				<li class="iIssued" title="iIssued"><span class="item_bg_position"></span></li>
			</ul>
			<br />
			<br />
		</form>
		<br />
	</div>
	
	<div id="dialog-confirm" title="Confirm">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>The item will be permanently deleted and cannot be recovered. Are you sure?</p>
	</div>

	<div class="ui-layout-west" style="overflow:hidden;">
        <div class="ui-widget-header header">Navigation</div>
        <div class="content">
        	<div id="accordions">
				<c:forEach items="${wrapper.categories}" var="category">
					<h3 id="${category.id }" title="${category.desc}">
						<a href="#">${category.label }</a>
						<span class="ui-icon ui-icon-plusthick" style="left:13em"></span>
						<span class="ui-icon ui-icon-pencil" style="left:14.5em"></span>
						<span class="ui-icon ui-icon-closethick" style="left:16em"></span>
					</h3>
					<div style="padding: 0; border:none">
						<ul class="connectedSortable ui-helper-reset">
							<c:forEach items="${category.items.item}" var="item">
								<c:set var="filterName" value="${item.dataFilterRef}" />
								<li id="${item.id }" class="${item.icon }" title="${item.desc}" filter="${filterName}">
									<input type="hidden" id="${filterName}" />
									<c:forEach items="${(wrapper.dataFilterMap[filterName]).dataFilterItem}" var="filterItem">
										<input type="hidden" name="${filterItem.fieldName}" value="${filterItem.filterValue}" />
									</c:forEach>
									<span class="item_bg_position"></span>
									<font>${item.label }</font>
									<a href="javascript:void(0)" class="ui-icon ui-icon-closethick"></a>	
									<a href="javascript:void(0)" class="ui-icon ui-icon-pencil"></a>	
								</li>
							</c:forEach>
						</ul>
					</div>
				</c:forEach>
				
			</div>
        </div>
	        	
	</div>
	
	<div  class="ui-layout-east">
        <div class="ui-widget-header header">Actions</div>
        <div class="subhead">action</div>
        <div class="contents">
			<ul style="list-style-type: none" id="actions">
			<c:forEach items="${wrapper.actionBtns}" var="actionBtn">
				<li class="${actionBtn.icon}" title="${actionBtn.desc}" baseURL="${actionBtn.baseURL}" param="${actionBtn.params}" 
				style="cursor: pointer; display: none; ">
					<span class="item_bg_position"></span>
				</li>
			</c:forEach>
			
		</ul>
        </div>
	</div>

	<div class="ui-layout-north">
        <div class="top-header">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
			  <tr>
			    <td width="15%" align="left" class="CollineTitleTd"><img src="common/img/Colline_logo.gif"/></td>
			    <td width="85%" id="CollineTitle"><img src="common/img/colline.gif"/></td>
			  </tr>
			</table>
		</div>
        <ul class="toolbar">
                <li id="tbarToggleNorth" class="first"><span></span>Toggle NORTH</li>
                <li id="tbarOpenSouth"><span></span>Open SOUTH</li>
                <li id="tbarCloseSouth"><span></span>Close SOUTH</li>
                <li id="tbarPinWest"><span></span>Pin/Unpin WEST</li>
                <li id="tbarPinEast" class="last"><span></span>Pin/Unpin EAST</li>
        </ul>
	</div>

	<div class="ui-layout-south">
        <div class="ui-widget-header header">Power by Lombord Risk</div>
	</div>

<div id="mainContent">
	<div id="mainItems">
		<div class="main-item" id="p1">
			<div class="item-header">Trigger Alert</div>
			<div class="item-content">
				<div>Trigger Alert</div>	
				<div>Trigger Alert...</div>	
			</div>
		</div>
		
		<div class="main-item" id="p2">
			<div class="item-header">CCP Daily Summary Screen</div>
			<div class="item-content">
				<span>CCP Group1</span>
				<div class="ccp_group ui-widget-content"></div>
			</div>
		</div>
		
		<div class="main-item" id="p4">
			<div class="item-header">Error Message</div>
			<div class="item-content" style="display: block;">
				<div>
		        	<h3>Error Message</h3>
		        	could not save data
		        </div>
			</div>
		</div>
		
		<div class="main-item" id="p3">
			<div class="item-header">External Exposure</div>
			<div class="item-content" style="display: block;">
	       		<table id="jqGrid">
	        	</table>
				<div id="gridPager"></div>
				<input  type="button" id="test" value="click" />
			</div>
		</div>
		
	</div>	
</div>

<script type="text/javascript" language="JavaScript">
	
	$(function() {
		$("#test").click(function() {
//			var exportData = $jqGrid.jqGridExport();

			function Parsejson(data){
				return new Function('return '+data)();
			}
			
			var str="{'a':'123','b':'abc'}";
			var obj=Parsejson(str);
//			var obj=eval( '(' + data + ')' );
			
			alert(obj.b);
			
		});
	});
	
</script>
</body>
</html>
